<template>
    <div class="achievements-wrap">
        <div class="achievements-step">
            <Step :active="2"/>
        </div>

        <div class="achievements-body">
            <van-form @submit="onSubmit" input-align="right" class="achievements-form">
                <div class="achievements-box">

                    <h2 class="achievements-title">
                        {{$t('message.cglx')}}：{{form.releaseCode}}
                    </h2>

                    <h2>{{$t('addMsg.dsb')}}：{{$t('addMsg.txjbxx')}}</h2>

                    <div class="title-box">
                        <h6>{{$t('message.hyly')}}</h6>
                    </div>

                    <!-- 行业领域一级 -->
                    <van-field
                        required
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="form.releaseFieldOne"
                        :label="$t('message.hyly')"
                        :placeholder="$t('message.p-qxz')"
                        @click="oneShowPicker = true"
                        right-icon="arrow"
                        :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"
                    />

                    <!-- 行业领域二级 -->
                    <van-field
                        required
                        v-if="twoType.length"
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="form.releaseFieldTwo"
                        label=" "
                        :placeholder="$t('message.p-qxz')"
                        @click="twoShowPicker = true"
                        right-icon="arrow"
                        :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"
                    />

                    <!-- 行业领域三级 -->
                    <van-field
                        required
                        v-if="threeType.length"
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="form.releaseFieldThree"
                        label=" "
                        :placeholder="$t('message.p-qxz')"
                        @click="threeShowPicker = true"
                        right-icon="arrow"
                        :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"
                    />

                    <!-- 行业领域其他 -->
                    <van-field
                        required
                        v-if="(achievementsForm.releaseFieldTwo && achievementsForm.releaseFieldTwo.includes('qt')) || (achievementsForm.releaseFieldThree && achievementsForm.releaseFieldThree.includes('qt'))"
                        v-model="form.releaseFieldOther"
                        label=" "
                        :placeholder="$t('message.p-qtfw')"
                        :rules="[
                { required: true, message: $t('message.p-qtfw')},
                { validator: asyncReleaseTitleCnValidator, message: $t('message.m6') },
                { validator: asyncReleaseTitleCnengValidator, message: $t('message.m3') },
                { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: $t('message.m2') },
                ]"
                    />
                </div>

                <div class="achievements-box">
                    <div class="title-box">
                        <h6>{{$t('message.txrxx')}}</h6>
                    </div>

                    <!-- 填表人 -->
                    <van-field
                        required
                        v-model="form.userName"
                        :name="$t('message.tbr')"
                        :label="$t('message.tbr')"
                        :placeholder="$t('message.p-tbr')"
                        :rules="[
                { required: true, message: $t('message.p-tbr')},
                { validator: asyncReleaseTitleCnValidator, message: $t('message.m6') },
                { validator: asyncReleaseTitleCnlengValidator, message: $t('message.m3') },
                { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: $t('message.m2') },
                ]"
                    />

                    <!-- 联系人手机号 - 中文显示状态 -->
                    <van-field
                        v-if="siteLang === 'zh-CN'"
                        required
                        v-model="form.userPhone"
                        :name="$t('message.lxdh')"
                        :label="$t('lackMsg.lxrsjh')"
                        :placeholder="$t('message.p-phone')"
                        :rules="[{ required: true, message: $t('message.p-phone') },{ pattern: /^1[3456789]\d{9}$/, message: $t('message.m10') } ]"
                    />
                    <!-- 联系人手机号 - 英文显示状态 -->
                    <van-field
                        v-if="siteLang !== 'zh-CN'"
                        v-model="form.userPhone"
                        :name="$t('message.lxdh')"
                        :label="$t('lackMsg.lxrsjh')"
                        :placeholder="$t('message.p-phone')"
                        :rules="[{ required: true, message: $t('message.p-phone') } ]"
                    />

                    <!-- 座机号码 -->
                    <van-field
                        v-model="form.landlineNumber"
                        :name="$t('message.zjhm')"
                        :label="$t('message.zjhm')"
                        :placeholder="$t('message.p-tell')"
                        :rules="[{ validator: asyncValidator, message: $t('message.m11') }]"
                    />
                    <!--                     :rules="[{ required: false, message: $t('message.p-tell') }, { required: false, pattern: /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/, message: $t('message.m11') }]" -->
                </div>

                <div class="achievements-submit">
                    <van-button
                        round
                        size="large"
                        color="linear-gradient(90deg, #FECF47 0%, #FFBC39 100%)"
                        @click="savingAchievementsData"
                        native-type="button"
                        :loading="storeLoading"
                    >{{$t('message.zc')}}
                    </van-button>

                    <van-row class="status-btn">
                        <van-col span="11">
                            <van-button
                                round
                                size="large"
                                @click="returnFn"
                                native-type="button"
                            >{{$t('addMsg.syb')}}
                            </van-button>
                        </van-col>
                        <van-col span="2"></van-col>
                        <van-col span="11">
                            <van-button
                                round
                                size="large"
                                native-type="submit"
                                :loading="nextLoading"
                            >{{$t('addMsg.xyb')}}
                            </van-button>
                            <!--  @click="onSubmit"  -->
                        </van-col>
                    </van-row>
                </div>
            </van-form>

            <!-- 行业领域一级mask -->
            <van-popup v-model="oneShowPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="oneType"
                    @confirm="oneConfirm"
                    @cancel="oneShowPicker = false"
                    :confirm-button-text="$t('message.ture')"
                    :cancel-button-text="$t('message.false')"
                />
            </van-popup>

            <!-- 行业领域二级mask -->
            <van-popup v-model="twoShowPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="twoType"
                    @confirm="twoConfirm"
                    @cancel="twoShowPicker = false"
                    :confirm-button-text="$t('message.ture')"
                    :cancel-button-text="$t('message.false')"
                />
            </van-popup>

            <!-- 行业领域三级mask -->
            <van-popup v-model="threeShowPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="threeType"
                    @confirm="threeConfirm"
                    @cancel="threeShowPicker = false"
                    :confirm-button-text="$t('message.ture')"
                    :cancel-button-text="$t('message.false')"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
    import Step from '@/components/StepBar'
    import Cookie from 'js-cookie'
    import buried from '@/utils/buried'

    export default {
        components: { Step },
        data () {
            return {
                form: {
                    // 移动端显示
                    releaseFieldOne: '', // 行业领域一级
                    releaseFieldTwo: '', // 行业领域二级
                    releaseFieldThree: '', // 行业领域三级
                    releaseFieldOther: '', // 行业领域其他
                    userName: '', // 填表人
                    userPhone: '', // 联系电话
                    landlineNumber: '' // 座机号码
                },
                achievementsForm: {
                    // 参数
                    releaseFieldOne: '', // 行业领域一级
                    releaseFieldTwo: '', // 行业领域二级
                    releaseFieldThree: '', // 行业领域三级
                    releaseFieldOther: '', // 行业领域其他
                    userName: '', // 填表人
                    userPhone: '', // 联系电话
                    landlineNumber: '' // 座机号码
                },
                oneShowPicker: false, // 控制行业领域一级mask显示隐藏
                twoShowPicker: false, // 控制行业领域二级mask显示隐藏
                threeShowPicker: false, // 控制行业领域三级mask显示隐藏
                industryPrimitiveDate: [], // 控制行业领域原始数据
                storeId: 0, // 暂存参数
                storeLoading: false, // 暂存
                nextLoading: false // 下一步暂存
            }
        },
        computed: {
            regionType () {
                // 发布地区列表
                const regionType = this.$store.state.regionType // 获取发布地区列表
                return regionType.map(item => ({
                    text: item.label,
                    value: item.value
                }))
            },
            achievementsStorage () {
                // 上一步数据
                return this.$store.state.achievements.achievementsStorage
            },
            siteLang () {
                // 设置默认 cookie
                return Cookie.get('site_lang') || 'zh-CN'
            },
            oneType () {
                // 行业领域一级
                return this.industryPrimitiveDate.map(item => ({
                    value: item.dictCode,
                    text: this.siteLang === 'zh-CN' ? item.dictName : item.dictNameEn,
                    serviceList: item.serviceList
                }))
            },
            twoType () {
                // 行业领域二级
                const releaseFieldOne = this.achievementsForm.releaseFieldOne
                let ind = this.oneType.findIndex(item => releaseFieldOne === item.value)
                if (ind === -1) return []
                const serviceList = this.oneType[ind].serviceList
                return serviceList.map(item => ({
                    value: item.dictCode,
                    text: this.siteLang === 'zh-CN' ? item.dictName : item.dictNameEn,
                    serviceList: item.serviceList
                }))
            },
            threeType () {
                // 行业领域三级
                const releaseFieldTwo = this.achievementsForm.releaseFieldTwo
                let ind = this.twoType.findIndex(item => releaseFieldTwo === item.value)
                if (ind === -1) return []
                const serviceList = this.twoType[ind].serviceList
                return serviceList.map(item => ({
                    value: item.dictCode,
                    text: this.siteLang === 'zh-CN' ? item.dictName : item.dictNameEn,
                    serviceList: item.serviceList
                }))
            },
            query () {
                // 路由参数
                return this.$route.query
            },
            id () {
                // 路由参数 ID
                return this.query.id
            },
            addTypeList () {
                return this.$store.state.addTypeList
            }
        },
        watch: {
            'form.releaseFieldOther' (newVal) {
                this.achievementsForm.releaseFieldOther = newVal
            },
            'form.userName' (newVal) {
                this.achievementsForm.userName = newVal
            },
            'form.userPhone' (newVal) {
                this.achievementsForm.userPhone = newVal
            },
            'form.landlineNumber' (newVal) {
                this.achievementsForm.landlineNumber = newVal
            }
        },
        async created () {
            const res = await this.$axios.post(
                '/api/dictionary/listDictionarysGroupBy'
            )
            if (res.data.code === 200) {
                const { data } = res.data
                this.industryPrimitiveDate = data.releaseArea
            }
        },
        mounted () {
            this.getDetailInfo()
            buried('M_result_add_new', 'M_add_new_achieve_fill')
        },
        methods: {
            // 最大长度
            asyncReleaseTitleCnengValidator (val) {
                if (val.length >= 128) {
                    return false
                }
            },
            // 验证英文
            asyncReleaseTitleCnValidator (val) {
                const regN = /^[!0-9]+$/
                if (regN.test(val)) {
                    return false
                }
            },
            // 验证填表人长度
            asyncReleaseTitleCnlengValidator (val) {
                if (val.length >= 64) {
                    return false
                }
            },
            // 验证固话
            asyncValidator (val) {
                return new Promise(resolve => {
                    const reg = /^(\d{3,4}-)?\d{7,8}$/i
                    resolve(!reg.test(val))
                })
            },
            // 根据 ID 获取详情信息
            async getDetailInfo () {
                    this.achievementsForm = {
                        ...this.achievementsStorage,
                        releaseCode: this.achievementsStorage.releaseCode,
                        releaseTitleCn: this.achievementsStorage.releaseTitleCn,
                        releaseTitleEn: this.achievementsStorage.releaseTitleEn,
                        releaseTime: this.achievementsStorage.releaseTime,
                        border: this.achievementsStorage.border,
                        province: this.achievementsStorage.province,
                        cityCode: this.achievementsStorage.cityCode,
                        regionCode: this.achievementsStorage.regionCode,
                        releaseLevel: this.achievementsStorage.releaseLevel,
                        releaseContent: this.achievementsStorage.releaseContent,
                        ossUrlList: this.achievementsStorage.ossUrlList,
                        releaseFieldOne: this.achievementsStorage.releaseFieldOne,
                        releaseFieldTwo: this.achievementsStorage.releaseFieldTwo,
                        releaseFieldThree: this.achievementsStorage.releaseFieldThree,
                        releaseFieldOther: this.achievementsStorage.releaseFieldOther,
                        userName: this.achievementsStorage.userName,
                        userPhone: this.achievementsStorage.userPhone,
                        landlineNumber: this.achievementsStorage.landlineNumber
                    }
                    this.form = {
                        ...this.achievementsForm,
                        releaseFieldOne: this.achievementsStorage.releaseFieldOneName,
                        releaseFieldTwo: this.achievementsStorage.releaseFieldTwoName || '',
                        releaseFieldThree: this.achievementsStorage.releaseFieldThreeName || '',
                    }
                    // 成果类型
                    const obj = this.addTypeList.find(item => this.achievementsForm.releaseCode === item.value);
                    this.form.releaseCode = obj ? obj.label : '';
            },
            // 行业领域一级确认按钮发生时
            oneConfirm (data) {
                this.form.releaseFieldOne = data.text
                this.achievementsForm.releaseFieldOne = data.value
                this.form.releaseFieldTwo = ''
                this.achievementsForm.releaseFieldTwo = ''
                this.form.releaseFieldThree = ''
                this.achievementsForm.releaseFieldThree = ''
                this.form.releaseFieldOther = ''
                this.achievementsForm.releaseFieldOther = ''
                this.oneShowPicker = false
            },
            // 行业领域二级确认按钮发生时
            twoConfirm (data) {
                this.form.releaseFieldTwo = data.text
                this.achievementsForm.releaseFieldTwo = data.value
                this.form.releaseFieldThree = ''
                this.achievementsForm.releaseFieldThree = ''
                this.form.releaseFieldOther = ''
                this.achievementsForm.releaseFieldOther = ''
                // console.log(data)
                this.twoShowPicker = false
            },
            // 行业领域三级确认按钮发生时
            threeConfirm (data) {
                this.form.releaseFieldThree = data.text
                this.achievementsForm.releaseFieldThree = data.value
                this.form.releaseFieldOther = ''
                this.achievementsForm.releaseFieldOther = ''
                this.threeShowPicker = false
            },
            // 保存成果分类中的数据
            async savingAchievementsData () {
                const params = {
                    landlineNumber: this.achievementsForm.landlineNumber || this.form.landlineNumber || '', // 座机号码
                    releaseFieldOne: this.achievementsForm.releaseFieldOne || this.form.releaseFieldOne || '', // 一级领域
                    releaseFieldOther: this.achievementsForm.releaseFieldOther || this.form.releaseFieldOther || '', // 其他领域
                    releaseFieldThree: this.achievementsForm.releaseFieldThree || this.form.releaseFieldThree || '', // 三级领域
                    releaseFieldTwo: this.achievementsForm.releaseFieldTwo || this.form.releaseFieldTwo || '', // 二级领域
                    userName: this.achievementsForm.userName || this.form.userName || '', // 填表人
                    userPhone: this.achievementsForm.userPhone || this.form.userPhone || '', // 联系电话
                    ossUrlList: this.form.ossUrlList || this.achievementsForm.ossUrlList || [], // 附件
                    releaseContent: this.achievementsForm.releaseContent || this.form.releaseContent || '', // 发布内容
                    border: this.achievementsForm.border || this.form.border || '', // 发布地区
                    releaseTime: this.achievementsForm.releaseTime || this.form.releaseTime || '', // 发布日期
                    releaseTitleCn: this.achievementsForm.releaseTitleCn || this.form.releaseTitleCn  || '', // 成果中文名称
                    releaseTitleEn: this.achievementsForm.releaseTitleEn || this.form.releaseTitleEn || '', // 成果英文名称
                    releaseLevel: this.achievementsForm.releaseLevel || this.form.releaseLevel || '', // 发布层级
                    regionCode: this.achievementsForm.regionCode || this.form.regionCode || this.achievementsStorage.regionCode || '', // 国家编码
                    cityCode: this.achievementsForm.cityCode || this.form.cityCode || '', // 市及编码
                    province: this.achievementsForm.province || this.form.province || '', // 省级编码
                    releaseCode: this.achievementsForm.releaseCode || this.form.releaseCode || '', // 类型
                    attributionCityCode: this.achievementsForm.attributionCityCode || this.form.attributionCityCode || '', // 中方企业属地（市）及编码
                    attributionProvince: this.achievementsForm.attributionProvince || this.form.attributionProvince || '', // 中方企业属地（省）
                    id: this.id || this.storeId // id
                }
                if (params.province.includes('-')) {
                    params.province = '';
                }
                let data = {}
                this.storeLoading = true
                if (this.id || this.storeId) {
                    data = await this.$axios.post(
                        '/api/releaseResult/updateReleaseResult',
                        params
                    )
                } else {
                    delete params.id
                    data = await this.$axios.post(
                        '/api/releaseResult/draftReleaseResult',
                        params
                    )
                }
                this.storeLoading = false
                if (data.data.code === 200) {
                    this.storeId = data.data.data
                    this.$toast(this.$t('message.zccg'))
                } else {
                    this.$toast(this.$t('message.zcsb'))
                }
            },
            // 返回上一页
            returnFn () {
                this.$store.commit('changeStorage', this.achievementsForm)
                if (this.storeId || this.id) {
                    // window.sessionStorage.setItem("storeId", this.storeId || this.id);
                    this.$router.push({
                        path: '/achievementsSecond',
                        query: {
                            id: this.storeId || this.id
                        }
                    })
                } else {
                    window.history.go(-1)
                }

            },
            // 下一步或者确认按钮
            async onSubmit () {
                let params = {
                    landlineNumber: this.achievementsForm.landlineNumber || this.form.landlineNumber || this.achievementsStorage.landlineNumber || '', // 座机号码
                    releaseFieldOne: this.achievementsForm.releaseFieldOne || this.form.releaseFieldOne || this.achievementsStorage.releaseFieldOne || '', // 一级领域
                    releaseFieldOther: this.achievementsForm.releaseFieldOther || this.form.releaseFieldOther || this.achievementsStorage.releaseFieldOther || '', // 其他领域
                    releaseFieldThree: this.achievementsForm.releaseFieldThree || this.form.releaseFieldThree || this.achievementsStorage.releaseFieldThree || '', // 三级领域
                    releaseFieldTwo: this.achievementsForm.releaseFieldTwo || this.form.releaseFieldTwo || this.achievementsStorage.releaseFieldTwo || '', // 二级领域
                    userName: this.achievementsForm.userName || this.form.userName || this.achievementsStorage.userName || '', // 填表人
                    userPhone: this.achievementsForm.userPhone || this.form.userPhone || this.achievementsStorage.userPhone || '', // 联系电话
                    ossUrlList: this.form.ossUrlList || this.achievementsForm.ossUrlList || this.achievementsStorage.ossUrlList || [], // 附件
                    releaseContent: this.achievementsForm.releaseContent || this.form.releaseContent || this.achievementsStorage.releaseContent || '', // 发布内容
                    border: this.achievementsForm.border || this.form.border || this.achievementsStorage.border || '', // 发布地区
                    releaseTime: this.achievementsForm.releaseTime || this.form.releaseTime || this.achievementsStorage.releaseTime || '', // 发布日期
                    releaseTitleCn: this.achievementsForm.releaseTitleCn || this.form.releaseTitleCn || this.achievementsStorage.releaseTitleCn || '', // 成果中文名称
                    releaseTitleEn: this.achievementsForm.releaseTitleEn || this.form.releaseTitleEn || this.achievementsStorage.releaseTitleEn || '', // 成果英文名称
                    releaseLevel: this.achievementsForm.releaseLevel || this.form.releaseLevel || this.achievementsStorage.releaseLevel || '', // 发布层级
                    regionCode: this.achievementsForm.regionCode || this.form.regionCode || this.achievementsStorage.regionCode || '', // 国家编码
                    cityCode: this.achievementsForm.cityCode || this.form.cityCode || this.achievementsStorage.cityCode || '', // 市及编码
                    province: this.achievementsForm.province || this.form.province || this.achievementsStorage.province || '', // 省级编码
                    releaseCode: this.achievementsForm.releaseCode || this.form.releaseCode || this.achievementsStorage.releaseCode || '', // 类型
                    attributionCityCode: this.achievementsForm.attributionCityCode || this.form.attributionCityCode || this.achievementsStorage.attributionCityCode || '', // 中方企业属地（市）及编码
                    attributionProvince: this.achievementsForm.attributionProvince || this.form.attributionProvince || this.achievementsStorage.attributionProvince || '', // 中方企业属地（省）
                    id: this.id || this.storeId // id
                }
                if (params.province.includes('-')) {
                    params.province = '';
                }
                let data = null
                this.nextLoading = true
                if (this.id || this.storeId) {
                    data = await this.$axios.post(
                        '/api/releaseResult/submitReleaseResult',
                        params
                    )
                } else {
                    delete params.id
                    data = await this.$axios.post(
                        '/api/releaseResult/insertReleaseResult',
                        params
                    )
                }
                this.nextLoading = false
                if (data.data.code === 200) {
                    await this.$router.push({
                        path: '/succeed',
                        query: {
                            id: params.id || data.data.data,
                            title: 'RELEASE'
                        }
                    })
                } else {
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .achievements-wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        /*background: rgba(243, 246, 250, 1);*/
        padding: 15px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
    }

    .achievements-step {
        flex-shrink: 0;
    }

    .achievements-body {
        overflow-y: auto;
    }

    .achievements-box {
        padding: 15px;
        background: #fff;
        margin-top: 18px;
        border-radius: 4px;

        h2 {
            width: 100%;
            height: 26px;
            line-height: 26px;
            font-weight: 500;
            color: rgba(33, 33, 33, 1);
        }
    }

    .achievements-submit {
        margin-top: 48px;

        .status-btn {
            margin-top: 15px;

            .van-button {
                &.van-button--default {
                    border-color: #cccfd4;
                }
            }
        }
    }

    .title-box {
        display: flex;
        align-items: center;
        height: 44px;
        /*line-height: 44px;*/

        h6 {
            font-weight: 500;
            color: rgba(33, 33, 33, 1);
            display: flex;
            align-items: center;

            &:before {
                content: "";
                width: 4px;
                height: 15px;
                margin-right: 6px;
                background: #fe8b01;
                display: inline-block;
                vertical-align: top;
            }
        }
    }

    .achievements-title {
        margin-top: -15px;
        line-height: 40px !important;
        height: 40px !important;
        border-bottom: 1px solid #ebedf0;
        margin-bottom: 20px;
    }
</style>
